<template>
  <div id="Gismap">
    <div
      style="position: fixed;z-index: 999;margin-top: 10px;margin-left: 10px;right: 10px;display: flex;align-items: center;">
      <div style="margin-right: 10px;">
        <el-checkbox v-model="dzshow" label="电子地图" size="large" @change="checklayer('电子地图', dzshow)" />
        <el-checkbox v-model="wxshow" label="卫星地图" size="large" @change="checklayer('卫星地图', wxshow)" />
      </div>
      <div>
        <el-tooltip v-for="item in toolList" effect="dark" :content="item.name" placement="top">
          <img @click='checkFun(item.fun)' style="cursor: pointer;margin-right: 10px;width: 32px;" :src="item.ico" alt="">
        </el-tooltip>
      </div>
    </div>
    <!-- <img width="140" style="position: fixed;right: 10px;bottom: 10px;z-index: 999;opacity: .5;background:#263342;
border-radius:3px;" src="/img/logo.png" alt=""> -->
    <div id="map" class="map"></div>
    <div class="cleardialog detaildlg">
      <el-dialog v-model="$store.MapDlg" draggable :modal="false" title="情报板详情" width="500" :before-close="f_close">
        <div class="qbbinfo">
          <div class="mtable">
            <div class="tableitem">
              <div class="tabletitle">设备名称</div>
              <div class="tablecontent">{{ DeviceInfo.name }}</div>
            </div>
            <div class="tableitem">
              <div class="tableitem" style="width: 50%;">
                <div class="tabletitle">所属路段</div>
                <div class="tablecontent">{{ DeviceInfo.hw_code }}高速</div>
              </div>
              <div class="tableitem" style="width: 50%;">
                <div class="tabletitle">情报板类型</div>
                <div class="tablecontent">{{ DeviceInfo.model ? DeviceInfo.model.label : '' }}</div>
              </div>
            </div>

            <div class="tableitem">
              <div class="tableitem" style="width: 50%;">
                <div class="tabletitle">设备尺寸</div>
                <div class="tablecontent">{{ DeviceInfo.width }}x{{ DeviceInfo.height }}</div>
              </div>
              <div class="tableitem" style="width: 50%;">
                <div class="tabletitle">设备方向</div>
                <div class="tablecontent">{{ DeviceInfo.direction.label }}</div>
              </div>
            </div>
          </div>
          <div>
            <div style="margin-top: 20px;color: white;margin-bottom: 10px;">显示信息</div>
            <el-carousel v-show="MsgList.length != 0" trigger="click" height="200px">
              <el-carousel-item v-for="item in MsgList" :key="item">
                <div class="preview-f" :style="{ justifyContent: formatAlign(item.align.value) }">
                  <div class="preview" :style="{
                    color: formatColor(item.font_color.value),
                    fontSize: formatSize(item.font_size.value)
                  }" v-html="f_GetHTML(item.content)">
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
            <div class="preview-f" style="justify-content: center;" v-show="MsgList.length == 0">
              <div>当前情报板暂无播放信息</div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <div style="position: fixed;z-index: 999;top: 140px;">
      <div class="tree_item" @click="showTree('qbb')">
        <img src="/img/tree_qbb.png" alt="">
        <div>
          <div>情报板：</div>
          <div class="tree_font">{{ qbbcount }}（块）</div>
        </div>
      </div>
      <div class="tree_item" @click="showTree('sfz')">
        <img src="/img/tree_sfz.png" alt="">
        <div>
          <div>收费站：</div>
          <div class="tree_font">{{ sfzcount }}（个）</div>
        </div>
      </div>
      <div class="tree_item" @click="showTree('fwq')">
        <img src="/img/tree_fwq.png" alt="">
        <div>
          <div>服务区：</div>
          <div class="tree_font">{{ fwqcount }}（个）</div>
        </div>
      </div>
      <div class="tree_item" @click="showTree('gslc')">
        <img src="/img/tree_gslc.png" alt="">
        <div>
          <div>里程：</div>
          <div class="tree_font">100.702（公里）</div>
        </div>
      </div>
    </div>
    <div class="cleardialog treedlg">
      <el-dialog id="layerGis" width="340" v-model="TreeShow" title="设备列表" draggable :close-on-click-modal="false">
        <div class="dlgbody">
          <el-tree :data="m_tree" :node-key="'id'" :props="m_defaultProps" @node-click="clickTree"
            :default-expanded-keys="expandlist">
            <template #default="scope">
              <div class="custom-node">
                <span>{{ scope.node ? scope.node.label : '' }}</span>
              </div>
            </template>
          </el-tree>
        </div>
      </el-dialog>
    </div>
  </div>
</template>


<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import {
  init,
  ClearIcon,
  unloadMap,
  addPOINT,
  movePoint,
  zoomin,
  zoomout,
  measure,
  formatPoint,
  aimto,
  addGlz,
  addSFZ,
  addFWQ,
  drawHeighWay,
  addShi,
  addXian,
  aimtocenter,
  setLayerVisible
} from '../../utils/qbbmap';
import { mainStore } from '../../store';
import $sys from "../../api/sys";
import axios from 'axios';
const expandlist = ref([1, 2, 3, 4]);
const sfzcount = ref(0);
const fwqcount = ref(0);
const qbbcount = ref(0);
const dzshow = ref(true);
const wxshow = ref(true);

function f_GetHTML(html) {
  html = html.replaceAll(/\n/g, '<br>')
  html = html.replaceAll(" ", "&nbsp;");
  return html;
}

onMounted(() => {

  init();
  ClearIcon();
  getStake();
  getSFZ();
  getFWQ();
  getShi();
  getXian();
  drawHeighWay();
  checkmap();
  if ($store.tempTitle == '修改情报板') {
    ElMessage({
      message: '点击地图选择位置',
      type: 'info'
    })
    // let selectID = $store.tempData.id;
    // aimto([$store.tempData.longitude, $store.tempData.latitude]);
    // getDeviceByID(selectID);
    // movePoint();
  } else {
    getDeviceList();
  }
})
const DeviceInfo = ref({});
const MsgList = ref([]);
const $store = mainStore();
const TreeShow = ref(false);
const m_defaultProps = {
  children: "children",
  label: "name",
};

function checkmap() {
  let dzmap = localStorage.getItem('dzmap');
  let wxmap = localStorage.getItem('wxmap');
  if (dzmap) {
    if (dzmap == 'false') {
      dzshow.value = false;
    } else {
      dzshow.value = true;
    }
  }
  if (wxmap) {
    if (wxmap == 'false') {
      wxshow.value = false;
    } else {
      wxshow.value = true;
    }
  }
}
function checklayer(name, check) {
  if (name == '电子地图') {
    localStorage.setItem('dzmap', check)
  } else {
    localStorage.setItem('wxmap', check)
  }
  setLayerVisible(name, check)

}
const m_tree = ref([
  {
    id: 1,
    name: '情报板',
    children: []
  },
  {
    id: 3,
    name: '收费站',
    children: []
  },
  {
    id: 4,
    name: '服务区',
    children: []
  },
  {
    id: 2,
    name: '里程桩',
    children: []
  },
]);
function showTree(type) {
  if (type == 'qbb') {
    m_tree.value = [
      {
        id: 1,
        name: '情报板',
        children: QBBList.value
      }
    ]
  } else if (type == 'sfz') {
    m_tree.value = [
      {
        id: 2,
        name: '收费站',
        children: SfZlist.value
      }
    ]
  } else if (type == 'fwq') {
    m_tree.value = [
      {
        id: 3,
        name: '服务区',
        children: FWQlist.value
      }
    ]
  } else if (type == 'gslc') {
    m_tree.value = [
      {
        id: 4,
        name: '里程桩',
        children: LCZList.value
      }
    ]
  }
  TreeShow.value = true;
}
const SfZlist = ref([]);
const FWQlist = ref([]);
const QBBList = ref([]);
const LCZList = ref([]);
// function getSFZ() {
//   let arr = [];
//   axios.get('/data/p_sfz.json').then(res => {
//     res.data.features.forEach((item, index) => {
//       let obj = {};
//       obj.geom = item.geometry.coordinates;
//       obj.name = item.properties.tollgate + " K" + Number(item.properties.sfz_zh).toFixed(0);
//       obj.sfzname = item.properties.tollgate
//       arr.push(obj);
//     })
//     sfzcount.value = arr.length;
//     SfZlist.value = arr;
//     addSFZ(arr);
//   })
// }
function getSFZ() {

  $sys.getRoadDevice({ type: 'toll_gate' }).then(res => {
    if (res.code == 200) {
      let arr = [];
      res.data.forEach((item, index) => {
        if (item.type == "toll_gate") {
          item.geom = formatPoint(item.geom);
          item.disabled = true;
          arr.push(item);

        }
      })
      addSFZ(arr);
    }
  })
  $sys.getRoadDevice({ type: 'toll_gate', hw_code: 'S49' }).then(res => {
    if (res.code == 200) {
      let arr = [];
      res.data.forEach((item, index) => {
        item.geom = formatPoint(item.geom);
        item.disabled = true;
        arr.push(item);
        m_tree.value[1].children = arr;
        sfzcount.value = arr.length;
        SfZlist.value = arr;
      })
    }
  })
}
// function getFWQ() {

// }

// function getFWQ() {
//   let arr = [];
//   axios.get('/data/p_fwq.json').then(res => {
//     res.data.features.forEach((item, index) => {
//       let obj = {};
//       obj.geom = item.geometry.coordinates;
//       obj.name = item.properties.name + " K" + Number(item.properties.zh).toFixed(0);
//       obj.fwqname = item.properties.name;
//       arr.push(obj);
//     })
//     fwqcount.value = arr.length;
//     FWQlist.value = arr;
//     addFWQ(arr);
//   })
// }
function getFWQ() {
  $sys.getRoadDevice({ type: 'service-area' }).then(res => {
    if (res.code == 200) {
      let arr = [];
      res.data.forEach((item, index) => {
        item.geom = formatPoint(item.geom);
        item.disabled = true;
        arr.push(item);
        m_tree.value[0].children = arr;
      })
      addFWQ(arr);
    }
  })
  $sys.getRoadDevice({ type: 'service-area', hw_code: 'S49' }).then(res => {
    if (res.code == 200) {
      let arr = [];
      res.data.forEach((item, index) => {
        item.geom = formatPoint(item.geom);
        item.disabled = true;
        arr.push(item);
        m_tree.value[0].children = arr;
        fwqcount.value = arr.length;
        FWQlist.value = arr;
      })
    }
  })
}
function getShi() {
  let arr = [];
  axios.get('./data/p_shi.json').then(res => {
    res.data.features.forEach((item, index) => {
      let obj = {};
      obj.geom = item.geometry.coordinates;
      obj.name = item.properties.name;
      arr.push(obj);
    })
    addShi(arr);
  })
}
function getXian() {
  let arr = [];
  axios.get('./data/p_xian.json').then(res => {
    res.data.features.forEach((item, index) => {
      let obj = {};
      obj.geom = item.geometry.coordinates;
      obj.name = item.properties.name;
      arr.push(obj);
    })
    addXian(arr);
  })
}
function clickTree(e) {
  if (e.latitude && e.latitude != '') {
    aimto([e.longitude, e.latitude]);
  } else if (e.geom && e.geom != '') {
    aimto(e.geom);
  } else {
  }
}
function getStake() {
  // let arr = [];
  // axios.get('/data/p_glz.json').then(res => {
  //   res.data.features.forEach((item, index) => {
  //     if (item.properties.direct == '上行') {
  //       let obj = {};
  //       obj.geom = item.geometry.coordinates;
  //       obj.stake = item.properties.glz;
  //       obj.name = "K" + item.properties.glz;
  //       arr.push(obj);
  //     }
  //   })
  //   LCZList.value = arr;
  //   addGlz(arr);
  //   expandlist.value = [1, 2, 3, 4];
  // })
  $sys.getGLZList({ direction: '0' }).then(res => {
    if (res.code == 200) {
      let arr = [];
      res.data.forEach((item, index) => {
        item.geom = formatPoint(item.geom);
        // item.stake = item.properties.glz;
        item.name = "K" + item.stake;
        arr.push(item);
      })
      LCZList.value = arr;
      addGlz(arr);
    }
  })
}
const toolList = ref([
  {
    id: 1,
    name: '放大',
    ico: './img/zoom_in.png',
    fun: 'zoom_in'
  },
  {
    id: 2,
    name: '缩小',
    ico: './img/zoom_out.png',
    fun: 'zoom_out'
  },
  {
    id: 5,
    name: '全图显示',
    ico: './img/ico06.png',
    fun: 'full_map'
  },
  {
    id: 3,
    name: '测量距离',
    ico: './img/ico03.png',
    fun: 'mesure_distence'
  },
  {
    id: 4,
    name: '测量面积',
    ico: './img/icohm.png',
    fun: 'mesure_area'
  }
]);

function checkFun(e) {
  if (e == 'zoom_in') {
    zoomin();
  } else if (e == 'zoom_out') {
    zoomout();
  } else if (e == 'mesure_distence') {
    measure('distence');
  } else if (e == 'mesure_area') {
    measure('area');
  } else if (e == 'full_map') {
    aimtocenter()
  }
}
watch(() => $store.MapDeviceId, (nv, ov) => {
  if (nv && nv != '') {
    getDeviceInfoByID(nv);
    getMessageList(nv);
  }
})
function f_close() {
  $store.MapDeviceId = '';
  $store.MapDlg = false;
}
function getDeviceInfoByID(id) {
  $sys.getDeviceByID(id).then(res => {
    if (res.code == 200) {
      DeviceInfo.value = res.data;
    }
  })
}
function getMessageList(id) {
  let obj = {};
  obj.device_id = id;
  $sys.getPlayList(obj).then(res => {
    if (res.code == 200) {
      MsgList.value = res.data;
    }
  })
}
// function getDeviceList() {
//   $sys.deviceList().then(res => {
//     if (res.code == 200) {
//       res.data.forEach((item, index) => {
//         let derc = '';
//         if (item.direction) {
//           if (item.direction.label == '下行') {
//             derc = '↓'
//           } else {
//             derc = '↑'
//           }
//         }
//         let name='';
//         let fontcolor = '#36ff00';
//         if (item.playList.length>0) {
//           name = item.playList[0].content;
//           fontcolor=formatColor(item.playList[0].font_color);
//         }else{
//           name='暂无播放';
//           fontcolor='rgba(204,204,204,1)'
//         }
//         let img = '/img/bbs.png';
//         if (item.online) {
//           if (item.model && item.model.value == 't') {
//             img = '/img/Tqbb_online.png';
//           } else if (item.model && item.model.value == 'door-frame') {
//             img = '/img/Mqbb_online.png';
//           } else {
//             img = '/img/Fqbb_online.png';
//           }
//         } else {
//           if (item.model && item.model.value == 't') {
//             img = '/img/Tqbb_offline.png';
//           } else if (item.model && item.model.value == 'door-frame') {
//             img = '/img/Mqbb_offline.png';
//           } else {
//             img = '/img/Fqbb_offline.png';
//           }
//         }
//         m_tree.value[0].children = res.data;
//         QBBList.value = res.data;
//         qbbcount.value = res.data.length;
//         addPOINT(name, item.id, [item.longitude, item.latitude], 20, 16, fontcolor, false, item.online, img)
//       })
//     }
//   })
// }

// f_GetZH(scope.row.stake) }} {{ scope.row.direction ? scope.row.direction.value == '1' ?
//                                 '↓' : '↑' : ''

function f_GetFangxiang(id) {
  if(id==undefined)
  return "";
  if (id == "0") {
    return '↑'
  }
  else {
    return '↓'
  }
  //scope.row.direction ? scope.row.direction.value == '1' ? '↓' : '↑' : ''
}

function f_GetZH(zh) {
  var m_zh = parseInt(zh);
  if (zh - m_zh == 0) {
    return "K" + m_zh + "+000";
  }
  else {
    var bmz = parseInt((zh - m_zh) * 1000) + "";
    if (bmz.length == 1) {
      bmz = "00" + bmz;
    }
    else if (bmz.length == 2) {
      bmz = "0" + bmz;
    }
    return "K" + m_zh + "+" + bmz;
  }
}

function getDeviceList() {
  $sys.deviceList().then(res => {
    if (res.code == 200) {
      res.data.forEach((item, index) => {
        let derc = '';
        if (item.direction) {
          if (item.direction.label == '下行') {
            derc = '↓'
          } else {
            derc = '↑'
          }
        }
        var exestr = f_GetZH(item.stake);
        if (item.stake) {
          item.name = item.name + " " + exestr;
        }
        item.name = item.name + " "+ f_GetFangxiang(item.direction.value);

        let fontcolor = '#36ff00';
        let img = '/img/Fqbb_online.png';
        if (item.online) {
          if (item.model && item.model.value == 't') {
            img = '/img/Tqbb_online.png';
          } else if (item.model && item.model.value == 'door-frame') {
            img = '/img/Mqbb_online.png';
          } else {
            img = '/img/Fqbb_online.png';
          }
        } else {
          if (item.model && item.model.value == 't') {
            img = '/img/Tqbb_offline.png';
          } else if (item.model && item.model.value == 'door-frame') {
            img = '/img/Mqbb_offline.png';
          } else {
            img = '/img/Fqbb_offline.png';
          }
        }
        m_tree.value[0].children = res.data;
        QBBList.value = res.data;
        console.log(222, QBBList.value);
        qbbcount.value = res.data.length;

        addPOINT(item.name, item.id, [item.longitude, item.latitude], 20, 16, fontcolor, false, item.online, img)
      })
    }
  })
}
function getDeviceByID(id) {
  $sys.getDeviceByID(id).then(res => {
    if (res.code == 200) {
      let fontcolor = '#ff0000';
      if (res.data.online) {
        fontcolor = '#ff0000';
      } else {
        fontcolor = '#000000';
      }
      addPOINT(res.data.name, res.data.id, [res.data.longitude, res.data.latitude], 20, 16, '#ff0000', true, res.data.online);
    }
  })
}
function formatColor(string) {
  const r = string.substring(0, 3);
  const g = string.substring(3, 6);
  const b = string.substring(6, 9);
  const a = string.substring(9, 12);
  return `rgba(${r},${g},${b},1)`;
}
function formatSize(size) {
  let m_size = '';
  // if (size == '1616') {
  //   m_size = 16 * 2
  // } else if (size == '2424') {
  //   m_size = 24 * 2
  // } else if (size == '3232') {
  //   m_size = 32 * 2
  // } else if (size = '4848') {
  //   m_size = 48 * 2
  // }
  // return m_size + 'px';
  return 24 + 'px';
}
function formatAlign(align) {
  let flex = '';
  if (align == 'left') {
    flex = 'flex-start'
  } else if (align == 'right') {
    flex = 'flex-end'
  } else if (align == 'center') {
    flex = 'center'
  }
  return flex;
}
onUnmounted(() => {
  unloadMap();
  f_close();
  $store.catchFlag = false;
})
</script>

<style scoped lang="less">
.tree_item {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  color: #ffffff;
  cursor: pointer;

  .tree_font {
    color: #ffff00;
  }

  img {
    width: 50px;
  }
}

#Gismap {
  width: 100%;
  height: 100%;
}

.sjxian i {
  display: block;
  background: #fff;
  position: absolute;
}



.sjxian {
  .sij_xian_01 {
    top: 0;
    left: 0;
    width: 11px;
    height: 1px;
  }

  .sij_xian_02 {
    top: 0;
    left: 0;
    width: 1px;
    height: 11px;
  }

  .sij_xian_03 {
    bottom: 0;
    left: 0;
    width: 11px;
    height: 1px;
  }

  .sij_xian_04 {
    bottom: 0;
    left: 0;
    width: 1px;
    height: 11px;
  }

  .sij_xian_05 {
    top: 0;
    right: 0;
    width: 11px;
    height: 1px;
  }

  .sij_xian_06 {
    top: 0;
    right: 0;
    width: 1px;
    height: 11px;
  }

  .sij_xian_07 {
    bottom: 0;
    right: 0;
    width: 11px;
    height: 1px;
  }

  .sij_xian_08 {
    bottom: 0;
    right: 0;
    width: 1px;
    height: 11px;
  }
}

.preview-f {
  width: 90%;
  height: 200px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0 auto;
  background-color: black;
  font-weight: bold;
  overflow-y: auto;
}

.preview {
  white-space: nowrap;
}

.preview-f::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.preview-f::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* 设置滚动条的颜色 */
  border-radius: 6px;
  /* 设置滚动条的圆角 */
}

.preview-f::-webkit-scrollbar-track {
  background-color: #888;
  border-radius: 6px;
  /* 设置滚动条的轨道颜色 */
}

.mtable {
  border: 1px solid #173147;
  border-bottom: none;
}

:deep(.detaildlg .el-dialog) {
  background-color: #2F4052;
  margin: 0 !important;
  position: fixed;
  bottom: 0;
  right: 0;
}

:deep(.treedlg .el-dialog) {
  background-color: #2F4052f4;
  position: fixed;
  top: 0;
  left: 350px;
  height: 600px;
}

.dlgbody {
  height: 530px;
  overflow-y: auto;
}

.dlgbody::-webkit-scrollbar {
  background-color: #031f30 !important;
  width: 5px;
}

.dlgbody::-webkit-scrollbar-thumb {
  background-color: rgba(1, 80, 143, 0.6);
  border-radius: 500px;
}

:deep(.el-dialog__title) {
  color: white;
}

.tableitem {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* border-bottom: 1px solid #173147; */
  box-shadow: 0 1px #222e3b;
}

.tabletitle,
.tablecontent {
  line-height: 40px;
  color: white;
}

.tabletitle {
  width: 100px;
  background-color: #222e3b;
  padding: 0 10px;
}

.tablecontent {
  padding-left: 10px;
}

.map {
  width: 100%;
  height: 100%;
}

:deep(.cleardialog>div) {
  width: 0;
}

:deep(.el-overlay-dialog) {
  pointer-events: none;
}

:deep(.el-dialog) {
  pointer-events: auto;
}

:deep(.el-tree-node:focus>.el-tree-node__content) {
  background: none;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

:deep(.el-tree>.el-tree-node:after) {
  border-top: none;
}

:deep(.el-tree-node) {
  position: relative;
}

:deep(.el-tree-node__expand-icon.is-leaf) {
  display: none;
}

:deep(.el-tree-node__children) {
  padding-left: 16px;
}

:deep(.el-tree-node :last-child:before) {
  height: 38px;
}

:deep(.el-tree>.el-tree-node:before) {
  border-left: none;
}

:deep(.el-tree>.el-tree-node:after) {
  border-top: none;
}


:deep(.el-tree-node:after) {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

:deep(.el-tree-node:before) {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
  border-left: 1px dotted #fff;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

:deep(.el-tree-node:after) {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
  border-top: 1px dotted #fff;
  height: 20px;
  top: 12px;
  width: 18px;
}

:deep(.el-tree) {
  background-color: transparent;
}

:deep(.el-tree-node__content) {
  color: #fff;
}

:deep(.el-tree-node__content:hover) {
  background: none;
}
</style>

<style lang='less'>
#Gismap {

  .ol-zoomslider,
  .ol-zoom-out,
  .ol-zoom-in,
  .ol-rotate-reset {
    display: none;
    /* 隐藏缩放控件 */
  }
}
</style>